<!DOCTYPE html>
<html>
  <head>  
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://beta.api.mapy.cz/loader.js" ></script>
    <script type="text/javascript">Loader.load();</script>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript" src="../resources/jquery.js" ></script>
    <script type="text/javascript" src="../resources/map4jsf.js"></script>
    <script type="text/javascript" src="../resources/marker.js"></script>
    <script type="text/javascript" src="../resources/polyline.js"></script>
    <script type="text/javascript" src="../resources/polygon.js"></script>
    <script type="text/javascript" src="../resources/circle.js"></script>
    <script type="text/javascript" src="../resources/infowindow.js"></script>
    <title>Map UI Markup Prototype</title>
  </head>
  <body>
   <div id="map_canvas" style="width:50%; height: 50%"></div>
    <script type="text/javascript">
        Muni.Map.google.setMap({id:'map_canvas', latitude: -23.43, longitude: 134.13, zoom:8, draggable:false, mapType: 'TERRAIN', panControl: true, zoomControl: false, scaleControl: true});
        Muni.Marker.google.addMarker(Muni.Map.google.getMap(), {latitude: -23.43, longitude: 134.13, title: 'Title 1'});
        polylinePath = new Array(
            {latitude: -23.43, longitude: 134.13}, 
            {latitude: -23.43, longitude: 130.13}, 
            {latitude: -20.43, longitude: 134.13}
        );
        Muni.Polygon.google.addPolygon(Muni.Map.google.getMap(), {strokeColor: '#FF0000',  strokeOpacity: 0.5, path: polylinePath});
        var circleOptions = {
            centerLatitude: -23.43,
            centerLongitude: 134.13,
            radius: 1000000,
            fillColor: "#00FF00"            
        }
        var c = Muni.Circle.google.addCircle(Muni.Map.google.getMap(), circleOptions);
        var i = Muni.InfoWindow.google.addInfoWindow(Muni.Map.google.getMap(), {latitude: -23.43, longitude: 134.13, content: "Hello from Australian InfoWindow", show: true});
       </script>
    <<div id="seznam_canvas" style="width:50%; height: 50%"></div>
    <script type="text/javascript">
        Muni.Map.seznam.setMap({id:'seznam_canvas', latitude: 24.41790, longitude: 40.12655, zoom:7, mapType: 'ROADMAP', panControl: false, zoomControl: false});
        Muni.Marker.seznam.addMarker(Muni.Map.seznam.getMap(), {latitude: 24.41, longitude: 40.12, draggable: false, title: "Hello from Marker!" });
        polylinePath = new Array(
            {latitude: 24.41, longitude: 40.13}, 
            {latitude: 24.43, longitude: 50.13}, 
            {latitude: 10.43, longitude: 40.13}
        );
        var pl = Muni.Polyline.seznam.addPolyline(Muni.Map.seznam.getMap(), {color: '#FF0000',  opacity: 0.5, path: polylinePath});
        var pg = Muni.Polygon.seznam.addPolygon(Muni.Map.seznam.getMap(), {strokeColor: '#FF0000',  strokeOpacity: 0.5, path: polylinePath, fillColor: "#FF0000", fillOpacity: 0.4});
        var circleOptions = {
            centerLatitude: 24.43,
            centerLongitude: 40.13,
            radius: 1000000,
            fillColor: "#00FF00"            
        }
        var c = Muni.Circle.seznam.addCircle(Muni.Map.seznam.getMap(), circleOptions);
        var i = Muni.InfoWindow.seznam.addInfoWindow(Muni.Map.seznam.getMap(), {latitude: 24.43, longitude: 40.13, content: "Hello from Australian InfoWindow", show: true});
        var i2 = Muni.InfoWindow.seznam.addInfoWindow(Muni.Map.seznam.getMap(), {latitude: 23.43, longitude: 39.13, content: "Hello from Australian InfoWindow 2", show: true});
        Muni.InfoWindow.seznam.removeInfoWindow(Muni.Map.seznam.getMap(), i);
    </script>
    <div id="bing_canvas" style="position:absolute; width:400px; height:400px;"></div>
    <script type="text/javascript">
        Muni.Map.bing.setMap({id:'bing_canvas', latitude: -23.43, longitude: 134.13, zoom:8, mapType: 'HYBRID', draggable: true, mapTypeControl: false}, 'Atyu_0Pktx9gXrfUtNUHjmNt4gYbA3dfrF6knIUmiJfZwQ50Sqh7ZIE6E3FbUp2T');
        Muni.Marker.bing.addMarker(Muni.Map.bing.getMap(), {latitude: -23.43, longitude: 134.13, title: 'Hello from Bing', draggable: true});
        polylinePath = new Array(
            {latitude: -23.43, longitude: 134.13}, 
            {latitude: -23.43, longitude: 130.13}, 
            {latitude: -20.43, longitude: 134.13}
        );
        //var poly = Muni.Polyline.bing.addPolyline(Muni.Map.bing.getMap(), {color: "#FF0000", opacity: 0.5, path: polylinePath});
        //Muni.Polyline.bing.removePolyline(poly);
        var pg = Muni.Polygon.bing.addPolygon(Muni.Map.bing.getMap(), {strokeColor: '#FF0000',  strokeOpacity: 0.5, path: polylinePath, fillColor: "#FF0000", fillOpacity: 0.4});       
       // Muni.Polygon.bing.removePolygon(pg);         
        var circleOptions = {
            centerLatitude: -23.43,
            centerLongitude: 134.13,
            radius: 1000000,
            fillColor: "#00FF00"            
        }
        //var c = Muni.Circle.bing.addCircle(Muni.Map.bing.getMap(), circleOptions);
        var i = Muni.InfoWindow.bing.addInfoWindow(Muni.Map.bing.getMap(), {latitude: -23.43, longitude: 134.13, content: "<b>>Hello from Australian InfoWindow</b>", show: true});
    </script>
  </body>
</html>
